<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>WebSocket Video Playback</title>
		<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
		<!--CSS代码-->
		<link href="/css/learn_test.css" rel="stylesheet">
		<!--JS代码-->
		<script>
			var ws;
			var g_mouse_is_down = false;
			var g_point_show = 0;
			var g_point = {x:0, y:0};
			var g_rect = {x:0, y:0, w:0, h:0};

			function setupWebSocket() {
				if ("WebSocket" in window) {
					var canvas = document.getElementById('player');
					var ctx = canvas.getContext('2d');
					ws = new WebSocket('ws://172.17.154.98:18080/ws/video');
					ws.onopen = function(event) {
						console.log('on opened!');
						ws.send("ws connected! ");
					};
					ws.onmessage = function(event) {
						//console.log('on message recv: ', event.data);
						//update canvas:
						var img = new Image();
						img.onload = function() {
							canvas.width = img.width;
							canvas.height = img.height;
							ctx.drawImage(img, 0, 0);

							draw_osd_to_ctx(ctx); //叠加前端OSD
							draw_mouse_to_ctx(ctx); //绘制鼠标事件
						}
						img.src = URL.createObjectURL(event.data);
					};
					ws.onclose = function(event) {
						console.log('on closed!');
					};
					ws.onerror = function(error) {
						console.error('on WebSocket error:', error);
					};
				} else {
					alert("您的浏览器不支持 WebSocket!");
				}
			}

			function test_send() {
				ws.send("ws test msg:");
			}
			function ws_send_rect_sel() {
				if (ws.readyState === WebSocket.OPEN) {
					var json_obj = {
						type: "rect", 
						rect: {
							x: g_rect.x,
							y: g_rect.y,
							w: g_rect.w,
							h: g_rect.h
						}
					}
					var json_str = JSON.stringify(json_obj);
					ws.send(json_str);
				}
			}
			function ws_send_point_sel() {
				if (ws.readyState === WebSocket.OPEN) {
					var json_obj = {
						type: "point",
						point: {
							x: g_rect.x,
							y: g_rect.y
						}
					}
					var json_str = JSON.stringify(json_obj);
					ws.send(json_str);
				}
			}

			function canvas_init_draw() {
				var canvas = document.getElementById('player');
				var ctx = canvas.getContext('2d');

				//封面绘制
				ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				ctx.fillStyle = "rgba(200, 200, 200, 0.8)";
				ctx.beginPath();
				ctx.moveTo(canvas.width/2-40, canvas.height/2-40);
				ctx.lineTo(canvas.width/2+40, canvas.height/2);
				ctx.lineTo(canvas.width/2-40, canvas.height/2+40);
				ctx.closePath();
				ctx.fill();

				// 鼠标按下事件
				canvas.addEventListener('mousedown', function(e) {
					g_mouse_is_down = true;
					g_rect.x = e.pageX - canvas.offsetLeft;
					g_rect.y = e.pageY - canvas.offsetTop;
				});
				// 鼠标移动事件
				canvas.addEventListener('mousemove', function(e) {
					if (g_mouse_is_down) {
						//console.log('Mouse move to: [' + (e.pageX - canvas.offsetLeft) + ", " + (e.pageY - canvas.offsetTop) + "]");
						g_rect.w = (e.pageX - canvas.offsetLeft) - g_rect.x;
						g_rect.h = (e.pageY - canvas.offsetTop) - g_rect.y;
					}
				});
				// 鼠标抬起事件
				canvas.addEventListener('mouseup', function(e) {
					g_mouse_is_down = false;
					if (Math.abs(g_rect.w) > 3 && Math.abs(g_rect.h) > 3) {
						console.log("Mouse box selsect Rect: [" + g_rect.x + "," + g_rect.y + ", " + g_rect.w + "," + g_rect.h + "]");
						ws_send_rect_sel();
					}
					g_rect.w = 0;
					g_rect.h = 0;
				});
				//鼠标双击事件
				canvas.addEventListener('dblclick', function(e) {
					g_point.x = (e.pageX - canvas.offsetLeft);
					g_point.y = (e.pageY - canvas.offsetTop);
					g_point_show = 20;
					console.log("Mouse double click at: [" + g_point.x + "," + g_point.y + "]");
					ws_send_point_sel();
				});
			}

			//叠加前端OSD信息
			function draw_osd_to_ctx(context) {
			}
			//鼠标绘制
			function draw_mouse_to_ctx(context) {
				if (Math.abs(g_rect.w) > 3 && Math.abs(g_rect.h) > 3) {
					context.lineWidth = 3;
					context.strokeStyle = "rgba(0, 0, 255, 0.8)";
					context.strokeRect(g_rect.x, g_rect.y, g_rect.w, g_rect.h);
				}
				if (g_point_show > 0) {
					context.lineWidth = 3;
					context.strokeStyle = "rgba(0, 0, 255, 0.8)";
					context.arc(g_point.x, g_point.y, 5, 0, 2*Math.PI);
					context.stroke();

					g_point_show--;
				}
			}
		</script>
	</head>

	<body onload="canvas_init_draw()">
		<div class="center-flex">
			<canvas id="player" width="640" height="512">您的浏览器不支持 HTML5 canvas 标签。</canvas>
			<br>
			<button onclick="setupWebSocket()">play_run</button>
		</div>
		<div class="center-flex">
			<hr>
			<button onclick="test_send()">ws_send_test</button>
		</div>
		<hr>
	</body>
</html>

